<!--
 * @Description: 
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :close-on-click-modal="false"
    :title="
      type === 'add' ? $t('yonghuguanli.addUser') : $t('yonghuguanli.editUser')
    "
    :append-to-body="true"
    width="520px"
    :before-close="handleClose"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item :label="$t('yonghuguanli.user_name')" prop="user_name">
          <el-input :disabled="type === 'edit'" v-model="formData.user_name" />
        </el-form-item>
        <el-form-item :label="$t('yonghuguanli.role_name')" prop="group_id">
          <el-select
            v-model="formData.group_id"
            :disabled="formData.user_name === 'admin'"
          >
            <el-option
              v-for="item in roleList"
              :key="item.group_id"
              :label="item.group_name"
              :value="item.group_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('yonghuguanli.curuser_pwd')"
          prop="curuser_pwd"
        >
          <PasswordInput v-model="formData.curuser_pwd" />
        </el-form-item>
        <el-form-item
          v-if="type === 'edit'"
          :label="$t('yonghuguanli.changePwd')"
        >
          <el-switch v-model="openPwd"></el-switch>
        </el-form-item>
        <el-form-item
          v-if="type === 'add' || openPwd"
          :label="$t('yonghuguanli.user_pwd')"
          prop="user_pwd"
        >
          <PasswordInput v-model="formData.user_pwd" />
        </el-form-item>
        <el-form-item
          v-if="type === 'add' || openPwd"
          :label="$t('yonghuguanli.confirm_pwd')"
          prop="confirm_pwd"
        >
          <PasswordInput v-model="formData.confirm_pwd" />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import PasswordInput from "@/components/input/Password.vue";
import { addUser, updateUser } from "./service";
import util from "@/utils";
export default {
  components: { PasswordInput },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    roleList: {
      type: Array,
      default: () => [],
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: String,
      default: "add",
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }
    },
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", {
            user_name: val.user_name,
            group_id: val.group_id,
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    user_name: {
      get() {
        return this.$store.state.user_name;
      },
    },
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("yonghuguanli.confirm_pwd_promit")));
      } else if (value !== this.formData.user_pwd) {
        callback(new Error(this.$t("yonghuguanli.pwd_diffrence_promit")));
      } else {
        callback();
      }
    };
    const validateUserPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t("yonghuguanli.user_pwd_promit")));
      } else if (value.length < 8) {
        callback(new Error(this.$t("yonghuguanli.user_pwd_length_promit")));
      } else if (
        /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\W_]).{8,}$/.test(value) === false
      ) {
        callback(new Error(this.$t("yonghuguanli.user_pwd_format_promit")));
      } else {
        callback();
      }
    };
    return {
      openPwd: false,
      passwordType: "password",
      passwordType2: "password",
      passwordType3: "password",
      formData: {},
      rules: {
        user_name: [
          {
            required: true,
            message: this.$t("login.usernameTip"),
            trigger: "blur",
          },
        ],
        group_id: [
          {
            required: true,
            message: this.$t("yonghuguanli.role_empty_promit"),
            trigger: "change",
          },
        ],
        curuser_pwd: [
          {
            required: true,
            message: this.$t("yonghuguanli.curuser_pwd_promit"),
            trigger: "change",
          },
        ],
        user_pwd: [
          {
            validator: validateUserPass,
            trigger: "change",
          },
        ],
        confirm_pwd: [
          {
            validator: validatePass,
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    confirm() {
      console.log(this.formData);
      if (this.type === "add") {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const params = {
              ...this.formData,
              confirm_pwd: void 0,
            };
            addUser(params).then((res) => {
              util.msg.success("add_success");
              this.$emit("getList");
              this.cancel();
            });
          }
        });
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const params = {
              ...this.formData,
              confirm_pwd: void 0,
            };
            updateUser(params).then((res) => {
              util.msg.success("edit_success");
              this.$emit("getList");
              this.cancel();
            });
          }
        });
      }
    },
    cancel() {
      this.formData = {};
      this._visible = false;
    },
    handleClose(done) {
      this.formData = {};
      this._visible = false;
      done();
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      .el-input {
        width: 300px;
      }
    }
    .pwd-box {
      position: relative;
      width: 300px;
      .eye {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 10px;
        background: url("../../../assets/eye.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
